/**
 * Created by Delicate on 2018/1/3.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableOpacity,
    Animated
} from 'react-native';
import {NavigationActions} from 'react-navigation';
import Swiper from 'react-native-swiper'

let _self;

class Views extends React.Component {

    constructor(props) {
        super(props);
        _self = this;
        this.state = {
            imageOpacity: new Animated.Value(0)
        }
    }

    componentWillMount() {

    }

    componentDidMount() {
        _self.splashAdSkip()

    }

    splashAdSkip() {
        setTimeout(()=>{
            const route = _self.props.navigation.state.params ? _self.props.navigation.state.params.skipTo : null;
            if(route){
                _self.props.navigation.navigate(route.routeName,route.params);
            }
        },400)
    }

    //加载结束后触发
    loadReady() {
        Animated.timing(this.state.imageOpacity, {
            toValue: 1,
            duration: 200,
        }).start();
    }

    skip() {
        const reset = (route) => {
            const resetAction = NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName: route})
                ]
            })
            _self.props.navigation.dispatch(resetAction);
        };
        reset('Index');
    }

    render() {
        return (
            <View style={base.clientWH}>
                <Swiper
                    paginationStyle={styles.swiperPagination}
                    dot={<View style={styles.swiperDot}/>}
                    activeDot={<View style={styles.swiperDotActive}/>}
                    style={styles.wrapper}
                    loop={false}>
                    <View style={[base.clientWH ,styles.box]}>
                        <Animated.Image
                            style={[base.clientWH, styles.image, {opacity: this.state.imageOpacity}]}
                            resizeMode={'contain'}
                            onLoadEnd={()=>this.loadReady()}
                            source={require('../sources/image_guide_1.png')}/>
                    </View>
                    <View style={[base.clientWH ,styles.box]}>
                        <Animated.Image
                            style={[base.clientWH, styles.image, {opacity: this.state.imageOpacity}]}
                            resizeMode={'contain'}
                            source={require('../sources/image_guide_2.png')}/>
                    </View>
                    <View style={[base.clientWH ,styles.box]}>
                        <Animated.Image
                            style={[base.clientWH, styles.image, {opacity: this.state.imageOpacity}]}
                            resizeMode={'contain'}
                            source={require('../sources/image_guide_3.png')}>
                            <TouchableOpacity
                                activeOpacity={layout.TOUCH_OPACITY_ACTIVE}
                                onPress={()=>this.skip()}>
                                <Image source={require('../sources/icon_guide_enter.png')} style={[base.columnCC ,styles.btnBox]}/>
                            </TouchableOpacity>
                        </Animated.Image>
                    </View>
                </Swiper>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{},
    box:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
    },
    image:{
        flexDirection: 'column',
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    btnBox:{
        marginBottom: layout.height(100),
        width: layout.width(360),
        height: layout.height(90)
    },
    btn:{
        color: '#fff',
        backgroundColor: 'transparent'
    },
    swiperPagination: {
        bottom: layout.height(20)
    },
    swiperDotActive: {
        marginHorizontal: layout.width(4),
        width: layout.width(28),
        height: layout.height(8),
        backgroundColor: layout.MAIN_COLOR
    },
    swiperDot: {
        marginHorizontal: layout.width(4),
        width: layout.width(28),
        height: layout.height(8),
        backgroundColor: layout.MAIN_AUX_COLOR
    },
})

//路由
const Guide = {
    screen: Views,
    navigationOptions: {
        header: null,
    },
    name: 'Guide',
    sign: false
};

export default Guide;